﻿<script setup lang="ts" name="EpInfiniteScrollList">
import { getInfiniteScrollList } from '@/api/elementPlus'
import slot_16x9 from '@/assets/slot_16x9.png'
import useScrollPosition from '@/hooks/scrollPosition'
import useScrollListener from '@/hooks/scrollListener'
import useAffixPosition from '@/hooks/affixPosition'
import { storeToRefs } from 'pinia'
import { usePublicStore } from '@/store/public/publicStore'
import { useSystemConfigStore } from '@/store/storage/systemConfigStore'
const route = useRoute()
const systemConfigStore = useSystemConfigStore()
const { systemConfig } = storeToRefs(systemConfigStore)
useAffixPosition()
const publicStore = usePublicStore()
const { affixTop } = storeToRefs(publicStore)
useScrollListener(route)
// 滚动行为
useScrollPosition(route)

const initData: any = reactive({
  data: [],
  total: 0
})
const imagePreviewList = ref([])
const pageIndex = ref(0)
const pageSize = ref(20)
const pageCount = ref(1)
const loading = ref(false)

const formResult = reactive({
  type: [],
  date: '',
  name: ''
})
const onSubmit = () => {
  console.log('submit!')
  initData.data = []
  imagePreviewList.value = []
  getInitData()
}
const typeList = [
  {
    value: 'landscape',
    label: '风景'
  },
  {
    value: 'animal',
    label: '动物'
  },
  {
    value: 'food',
    label: '美食'
  },
  {
    value: 'beauty',
    label: '美女'
  },
  {
    value: 'car',
    label: '汽车'
  },
  {
    value: 'cartoon',
    label: '动漫'
  },
  {
    value: 'game',
    label: '游戏'
  },
  {
    value: 'other',
    label: '其他'
  }
]

const getInitData = () => {
  if (pageIndex.value < pageCount.value) {
    pageIndex.value += 1
    loading.value = true
    getInfiniteScrollList({ pageIndex: pageIndex.value, pageSize: pageSize.value, type: formResult.type }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
      console.log(res)
      if (res.data && res.data.length > 0) {
        setTimeout(() => {
          res.data.forEach(function (item) {
            item.src = 'https://cdn.jsdelivr.net/gh/kaivin/images/list/' + item.type + '/' + item.img + '.jpg'
            initData.data.push(item)
            imagePreviewList.value.push(item.src)
          })
          initData.total = res.total
          pageCount.value = Math.ceil(res.total / pageSize.value)
          console.log(initData)
          loading.value = false
        }, 1000)
      }
    })
  }
}
</script>
<template>
  <div class="infinite-page">
    <div v-infinite-scroll="getInitData" class="infinite-list vk-scroll-wrap">
      <el-alert title="无限滚动列表展示，本页面主要使用element-plus的无限滚动、固钉、表单组件，实现图片的加载中占位、加载失败占位，图片预览功能。" type="success" :closable="false" show-icon />
      <el-affix :offset="affixTop" target=".vk-scroll-wrap">
        <el-card shadow="hover">
          <el-form :inline="true">
            <el-form-item label="类型">
              <el-select v-model="formResult.type" multiple collapse-tags placeholder="选择类型">
                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker v-model="formResult.date" type="datetime" placeholder="选择日期和时间" />
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="formResult.name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item><el-button type="primary" icon="Search" @click="onSubmit">查询</el-button></el-form-item>
          </el-form>
        </el-card>
      </el-affix>
      <el-row :gutter="systemConfig.space">
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-for="(item, index) in initData.data" :key="item.id">
          <el-card shadow="hover">
            <el-image :src="item.src" fit="cover" :preview-src-list="imagePreviewList" :initial-index="index" lazy>
              <template #placeholder>
                <div class="image-slot">
                  <img :src="slot_16x9" />
                  <div class="slot-content">
                    <svg-icon icon="ep:picture"></svg-icon>
                    <p>{{ $t('settings.settingLoadingText') }}</p>
                  </div>
                </div>
              </template>
              <template #error>
                <div class="image-slot">
                  <img :src="slot_16x9" />
                  <div class="slot-content">
                    <svg-icon icon="ii:icon-image-failed"></svg-icon>
                    <p>{{ $t('settings.settingLoadingFailed') }}</p>
                  </div>
                </div>
              </template>
            </el-image>
            <div class="item-title">{{ item.title }}</div>
            <div class="item-description">{{ item.description }}</div>
            <div class="item-date">{{ item.date }}</div>
          </el-card>
        </el-col>
      </el-row>
      <el-divider v-if="loading" border-style="dashed">
        <svg-icon class="is-loading" icon="ep:loading"></svg-icon>
        {{ $t('settings.settingLoadingText') }}
      </el-divider>
      <el-divider v-if="pageIndex === pageCount && !loading" border-style="dashed">
        {{ $t('settings.settingNoMore')
        }}
      </el-divider>
      <vk-footer v-if="systemConfig.isFooterEnable"></vk-footer>
      <el-backtop :title="$t('buttons.buttonBackTop')" target=".vk-scroll-wrap"></el-backtop>
    </div>
  </div>
</template>

<style scoped lang="scss">
.infinite-page {
  overflow: hidden;
}

.infinite-list {
  height: 100%;
  margin: 0;
  padding: var(--el-space) var(--el-space) 0;
  overflow: auto;
  list-style: none;

  :deep(.el-divider__text) {
    display: flex;
    align-items: center;
    color: var(--el-text-color-placeholder);
    background-color: var(--el-bg-color-page);

    .el-icon {
      margin-right: 5px;
    }
  }
}

.el-row .el-col {
  margin-top: var(--el-space);

  .el-card {
    cursor: pointer;

    :deep(.el-card__body) {
      padding: 0;
      overflow: hidden;
    }

    :deep(.el-image) {
      display: block;
      width: 100%;
    }
  }

  .item-title {
    margin: 15px 20px 10px;
    font-weight: 700;
    font-size: 16px;
  }

  .item-description {
    margin: 0 20px 10px;
    opacity: 0.7;
  }

  .item-date {
    margin: 0 20px 15px;
    opacity: 0.5;
  }
}

.el-alert {
  margin-bottom: var(--el-space);
}
</style>
